<template>
  <ul class="dataList-container">
    <li v-for="item in list.row" :key="item.id">
      <el-avatar :src="item.avatar" :size='55'></el-avatar>
      <div class="data">
        <div class="username">{{item.nickname}}</div>
        <div class="content">
            {{item.content}}
        </div>
        <div class="time">{{getDate(item.createDate)}}</div>
      </div>
    </li>
  </ul>
</template>

<script>
import getDate from '../../../utils/getdate'
export default {
  
  props:['list'],
  methods: {
      getDate,
  },
 
}
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  display: flex;
  border-bottom: 1px solid rgb(168, 168, 168);
  padding: 15px 0;
}
.Avatar-container {
  margin-right: 15px;
  flex: 0 0 auto;
}
.username {
  color: greenyellow;
  margin-bottom: 10px;
}
.content {
  font-size: 10px;
}
.data {
  flex: 1 1 auto;
  position: relative;
}
.time {
  position: absolute;
  right: 0;
  top: 5px;
  font-size: 12px;
  color: gray;
}
</style>